<template>
  <div>
    <template>
      <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText" :height="height">
        <el-table-column label="序号" width="95">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="费用号" prop="title" />
        <el-table-column label="项目名称" prop="author" />
        <el-table-column label="发生的问题" prop="pageViews" sortable />
        <el-table-column label="问题原因" prop="pageViews" sortable />
        <!-- <el-table-column label="改为折线图；报警率改为千分之一" prop="datetime" >
          <template #default="{ row }">
            <el-tooltip class="item" :content="row.status" effect="dark" placement="top-start">
              <el-tag :type="row.status | statusFilter">
                {{ row.status }}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column label="对应人" prop="author" sortable />
        <el-table-column label="完成时间" prop="author" sortable />
        <el-table-column label="处理结果" prop="pageViews" sortable />
        <el-table-column label="备注" prop="pageViews" sortable />
        <el-table-column label="操作" width="180px">
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="background"
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </template>
  </div>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    props: {},
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
    },
    data() {
      return {
        imgShow: true,
        list: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
        timeOutID: null,
      }
    },
  }
</script>
